<template>
	<scroll-view scroll-y="true">
		<view class="pageAll">
			<view>
				<view class="formView">
					<view class="formViewInput">
						<input type="text" v-model="form.name" placeholder="请输入企业负责人名称" placeholder-style="color:#b57979" />
					</view>
					<view class="formViewInput">
						<input type="text" v-model="form.companyName" placeholder="请输入企业名称" placeholder-style="color:#b57979" />
					</view>
					<view class="formViewInput">
						<input type="text" v-model="form.uscCode" placeholder="请输入社会统一信用代码" placeholder-style="color:#b57979" />
					</view>
					<view class="formViewInput">
						<input type="number" v-model="form.pwd" maxlength="6" placeholder="请设置6位的文件确认密码" placeholder-style="color:#b57979" />
					</view>
				</view>
				<view class="tipView">
					<text>{{tip}}</text>
				</view>
				<view class="formView bankInfo">
					<view class="formViewInput">
						<label class="fromLabel">
							<input type="text" v-model="form.bankName" @input="inputBankName" :focus='bankNameFocus' />
							<view v-if="bankNameVisible" class="fromInputLabelText" @click="fbankNameFocus">
								<text class="palLeft">结算指定银行名称</text>
								<text class="palRight">如：深圳市招商银行南山支行</text>
							</view>
						</label>
					</view>
					<view class="formViewInput">
						<input type="text" v-model="form.bankNum" @input="inputBankNum" placeholder="结算指定银行账户" placeholder-style="color:#b57979" />
					</view>
					<view class="formViewInput">
						<input type="text" v-model="form.bankPeople" placeholder="结算指定银行户主姓名" placeholder-style="color:#b57979" />
					</view>
				</view>
			</view>
			<view class="crossView">
				<view>
					<cross :cssClass="'cross'" @getImageTempPaths="getImageTempPaths" :imgType="1" :type="1" :tipText="'点击上传'"></cross>
					<text class="crossViewText">企业营业执照</text>
				</view>
			</view>
			<view class="submitView">
				<button @click="submit" hover-class="subActive">
					完成
				</button>
			</view>
			<!-- <logo class="Bottomlogo"></logo> -->
		</view>
	</scroll-view>
</template>

<script>
	import cross from '@/components/commonCom/cross.vue'
	import logo from '../../../components/logo/bottomLogo.vue'
	import {
		uploadFile
	} from '@/utils/alioss.js'
	import {
		AvoidDoubleClick,
		HBValidate
	} from '@/utils/tools.js'

	const avoidDoubleClick = new AvoidDoubleClick()

	export default {
		data() {
			return {
				form: {
					companyName: null,
					name: null,
					uscCode: null,
					pwd: null,
					bankNum: null,
					bankName: null,
					bankPeople: null,
				},
				imgPath: '', // 图片路径
				tip: '说明：文件确认密码将用于您在红标平台所有往来文件的个人确认用途，具有个 人签名同等法律效力。',
				bankNameVisible: true,
				isWorking: false, // 防止用户多次点击
				bankNameFocus: false
			}
		},

		methods: {
			uploadFile,
			fbankNameFocus() {
				this.bankNameFocus = true
			},
			//  指定银行名称，模拟占位符显示与隐藏
			inputBankName(e) {
				const text = e.detail.value
				if (text === null || text === '') {
					this.bankNameVisible = true
				} else {
					this.bankNameVisible = false
				}
			},
			// 输入银行卡号时自动填充 “-”号
			inputBankNum(e) {
				let text = JSON.parse(JSON.stringify(e.detail.value))
				text = text.toString()
				text = text.replace(/[-]/g, '')
				const length = text.length
				let newText = ''
				for (let i = 0; i < length; i++) {
					if (length - i >= 4 && i % 4 === 0) {
						if (i === 0) {
							newText += text.substring(i, i + 4)
						} else {
							newText += '-' + text.substring(i, i + 4)
						}
					}
					if (length - i < 4 && i % 4 === 0) {
						if (length >= 4) {
							newText += '-' + text.substring(i)
						} else {
							newText += text.substring(i)
						}

					}
				}
				this.$set(this.form, 'bankNum', newText)
			},
			submit() {
				const validate = new HBValidate()
				const bankNum = this.form.bankNum ? this.form.bankNum.replace(/[-]/g, '') : null
				if (!this.form.name) {
					uni.showToast({
						title: '企业负责人名称不能为空',
						duration: 2000,
						icon: 'none',
					});
				} else if (!this.form.companyName) {
					uni.showToast({
						title: '企业名称不能为空',
						duration: 2000,
						icon: 'none',
					});
				} else if (!validate.isUSCCode(this.form.uscCode)) {
					uni.showToast({
						title: '社会统一信用代码格式错误',
						duration: 2000,
						icon: 'none',
					});
				} else if (!validate.isFilePwd(this.form.pwd)) {
					uni.showToast({
						title: '文件确认密码格式错误',
						duration: 2000,
						icon: 'none',
					});
				} else if (!this.form.bankName) {
					uni.showToast({
						title: '银行名称不能为空',
						duration: 2000,
						icon: 'none',
					});
				} else if (!this.form.bankPeople) {
					uni.showToast({
						title: '银行户主不能为空',
						duration: 2000,
						icon: 'none',
					});
				} else if (!this.imgPath) {
					uni.showToast({
						title: '请上传企业营业执照',
						duration: 2000,
						icon: 'none',
					});
				} else {

					if (avoidDoubleClick.isWork()) {
						return false
					}

					// 上传图片到服务器
					uploadFile(this.imgPath)
						.then(res => {
							this.imgPath = res.data.url
							if (this.imgPath) {
								this.$api.companySubmitMessage({
										category: 'supplier', //用户类别（supplier-供应商；buyer-买手）,
										name: this.form.name,
										company: this.form.companyName,
										code: this.form.uscCode,
										bank_name: this.form.bankName,
										bank_account: bankNum,
										bank_master: this.form.bankPeople,
										order_password: this.form.pwd,
										license: this.imgPath,
									})
									.then(res => {
										if (res.status) {
											uni.redirectTo({
												url: '../cooperationSigning/cooperationSigning?userType=2'
											})
										} else {
											uni.showToast({
												title: res.msg,
												icon: 'none',
												duration: 1500,
											})
										}
										avoidDoubleClick.toRest()
									})
									.catch(err => {
										avoidDoubleClick.toRest()
									})
							}
						})
						.catch(res => {
							uni.showToast({
								title: '图片上传失败'
							})
							avoidDoubleClick.toRest()
						})
				}
			},
			// 获取图片路径, 由子组件将数据传递过来
			getImageTempPaths(childValue) {
				this.imgPath = childValue.img
			},
		},
		components: {
			cross,
			logo,
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 0 17upx 0 17upx;
		display: inline-block;
	}

	.formView {
		margin-top: 17upx;
	}

	.formViewInput {
		width: 100%;
		margin-bottom: 18upx;
	}

	.formViewInput input {
		border-radius: 8upx;
		background-color: #FFF;
		box-shadow: 0 0 10upx rgba(57, 11, 11, 0.15);
		height: 100upx;
		color: #b57979;
		font-size: 32upx;
		padding: 0 20upx;
	}

	.bankInfo input {
		font-size: 24upx !important;
	}

	.fromLabel {
		position: relative;
		display: block;
	}

	.fromLabel .fromInputLabelText {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 95.33upx;
		padding: 0 20upx;
		width: 100%;
	}

	.fromInputLabelText text {
		font-size: 24upx;
		color: #b57979;
		display: inline-block;
	}

	.fromInputLabelText .palLeft {
		width: 52%;
	}

	.tipView {
		color: #033333;
		font-size: 20upx;
	}

	.crossView {
		margin-top: 80upx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
	}

	.crossViewText {
		width: 100%;
		text-align: center;
		font-size: 36upx;
		color: #b57979;
		padding: 13.33upx 0;
		display: inline-block;
	}

	.submitView {
		margin-top: 150upx;
	}

	.submitView button {
		background-color: #f7533e;
		color: #FFF;
		letter-spacing: 13.33upx;
	}

	.subActive {
		background-color: #FFC8C7 !important;
	}
</style>
